<template>
  <view class="container">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading">加载中...</view>

    <!-- 渲染 HTML 内容 -->
    <scroll-view v-else class="content" scroll-y>
      <mp-html
          :content="htmlContent"
          :tag-style="tagStyle"
          scroll-table
          @error="handleHtmlError"
      />
    </scroll-view>

    <!-- 错误提示 -->
    <view v-if="error" class="error">加载失败，请稍后重试</view>
  </view>
</template>

<script>
import { getContentDetail } from '@/api/contentDetail.js'
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'// 需要安装 mp-html 插件

export default {
  components: {
    mpHtml
  },
  data() {
    return {
      htmlContent: '',
      loading: false,
      error: false,
      tagStyle: {
        table: 'border: 1px solid #ccc; table-layout: fixed;', // 固定布局
        td: 'padding: 8px; max-width: 300rpx;', // 控制最大宽度
        pre: 'position: relative; margin: 0;', // 为代码块定位做准备
        code: 'font-family: Monaco, Consolas; white-space: pre-wrap; word-break: break-all;' // 等宽字体
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.loadData(options.id)
    }
  },
  methods: {
    async loadData(id) {
      this.loading = true
      this.error = false
      try {
        const res = await getContentDetail(id)
        if (res.code === '200') {
          this.htmlContent = res.data.articleContent

          wx.setNavigationBarTitle({
            title: res.data.articleTitle,
            success: () => {
              console.log('标题设置成功');
            },
            fail: (err) => {
              console.error('标题设置失败', err);
            }
          });
        }
      } catch (err) {
        this.error = true
        console.error('详情加载失败:', err)
      } finally {
        this.loading = false
      }
    },
    handleHtmlError(err) {
      console.error('HTML渲染错误:', err)
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #FCFBFBFF;
  margin: 10px;
}

.loading, .error {
  text-align: center;
  padding: 40rpx;
  color: #999;
}

.content {
  height: 100%;
}

/* 在detail.vue的style区块添加 */
.mp-html .mp-html-content pre,
.mp-html .mp-html-content code {
  max-width: 100% !important;
  overflow-x: auto !important;
  display: block !important;
  white-space: pre-wrap !important; /* 允许代码换行 */
  word-break: break-all !important; /* 长单词强制换行 */
  background: #f5f5f5 !important;
  padding: 10rpx !important;
  border-radius: 8rpx !important;
  margin: 0 !important; /* 移除默认外边距 */
}

/* 表格增强样式 */
.mp-html .mp-html-content table {
  width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
  white-space: nowrap !important; /* 保持表格不换行 */
  -webkit-overflow-scrolling: touch !important; /* 滚动流畅 */
}

.mp-html .mp-html-content td {
  min-width: 150rpx !important; /* 设置最小列宽 */
  word-break: break-word !important; /* 允许单元格内容换行 */
}

/* 滚动条样式 */
.mp-html .mp-html-content ::-webkit-scrollbar {
  height: 6px;
  background: #f1f1f1;
}

.mp-html .mp-html-content ::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
</style>
